<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日历</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        #calendar {
            width: 350px;
            margin: 50px auto;
            border: 1px solid #cccccc;
        }

        #calendar li {
            width: 50px;
            height: 50px;
            box-shadow: 0 0 1px #cccccc;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
            user-select: none;
            font-size: 18px;
        }

        .day>li.active {
            background: lightgreen;
            font-weight: bold;
        }

        .day>li.other {
            color: #cccccc;
        }

        .title {
            height: 50px;
        }

        .title>button {
            padding: 3px 10px;
            margin: 0 5px;
        }
    </style>
</head>

<body>
    <div id="calendar">
        <div class="title flex j-c a-c">
            <button class="prev">上月</button>
            <span id="year">2020</span>
            <span>年</span>
            <span id="month">11</span>
            <span>月</span>
            <button class="next">下月</button>
        </div>
        <ul class="week flex">
            <li>日</li>
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
            <li>五</li>
            <li>六</li>
        </ul>
        <ul class="day flex-wrap">

        </ul>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        let date = new Date()    //返回当前日期

        //上月按钮点击事件
        $('.prev').click(function(){
            date.setDate(1)
            date.setMonth(date.getMonth()-1)
            if(date.getFullYear()=== new Date().getFullYear() &&
            date.getMonth()=== new Date().getMonth()){
                date = new Date()
            }
            //调用显示日期的方法
            showCalendar()
        })

        //下月按钮点击事件
        $('.next').click(function(){
            date.setDate(1)
            date.setMonth(date.getMonth()+1)
            if(date.getFullYear()=== new Date().getFullYear() &&
            date.getMonth()=== new Date().getMonth()){
                date = new Date()
            }
            //调用显示日期的方法
            showCalendar() 
        })

        //调用显示日期的方法
        showCalendar() 

        //显示日期的方法
        function showCalendar() {
            //先清空ul里面li数据
            $('.day').empty()
            $('#year').text(date.getFullYear())
            $('#month').text(date.getMonth()+1 > 9 ? date.getMonth()+1 : '0'+(date.getMonth()+1))
            //获取当前月份有多少天 和 今天是几号
            let { days, today } = getMonthDays(date)
            //循环当前月份的天数
            for (let i = 1; i <= days; i++) {
                //创建li标签
                let li = $('<li/>').text(i)
                //如果是今天，li添加高亮样式
                if (i === today && date.getMonth() === new Date().getMonth() &&
                date.getFullYear() === new Date().getFullYear()) {
                    li.addClass('active')
                }
                //将li添加到容器中
                //append()方法，在容器的下面添加元素
                $('.day').append(li)
            }
            //获取当前月份的1号是星期几
            let date1 = new Date(date)
            date1.setDate(1)
            let week = date1.getDay()
            //当前月份的1号是星期几，就在前面补几位
            for (let i = 1; i <= week; i++) {
                //日期每次减一天
                date1.setDate(date1.getDate() - 1)
                //创建li标签
                let li = $('<li/>').text(date1.getDate()).addClass('other')
                //prepend()方法，在容器的上面添加元素
                $('.day').prepend(li);
            }
            //获取当前月份的最后一天是星期几
            let date2 = new Date(date)
            date2.setDate(days)
            let week2 = date2.getDay()
            //添加后面的补位
            for (let i = 1; i <= 6 - week2; i++) {
                //日期每次加一天
                date2.setDate(date2.getDate() + 1)
                //创建li标签
                let li = $('<li/>').text(date2.getDate()).addClass('other')
                $('.day').append(li);
            }
        }

        //获取当前月份天数的方法,该方法同时还返回今天是几号
        function getMonthDays(date) {
            let y = date.getFullYear()  //返回年份
            let m = date.getMonth()     //返回月份
            let today = date.getDate()      //返回日期
            let days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][m]
            //2月份，判断闰年
            if (m === 1) {
                if (y % 4 === 0 && y % 100 != 0 || y % 400 === 0) {
                    days += 1
                }
            }
            return {
                days,
                today
            }
        }

    </script>
</body>

</html>